<template>
	<u-popup
		v-model="popupValue"
		length="auto"
		mode="bottom"
		:blur="0"
		:popup="false"
		:z-index="uZIndex"
		:maskCloseAble="true"
		:safeAreaInsetBottom="true"
		:border-radius="borderRadius"
		@close="popupClose"
	>
		<view class="u-tips u-border-bottom">
			<view>需支付</view>
			<view class="payment-amount-box">
				<text class="payment-amount">{{ vk.pubfn.priceFilter(totalFee) }}</text>
				<text>元</text>
			</view>
			<text>请选择支付方式</text>
		</view>
		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
		<view
			class="pay-action-sheet-item u-line-1"
			:hover-stay-time="150"
			@touchmove.stop.prevent
			@click.stop="pay('alipay')"
		>
			<view>
				<u-icon name="zhifubao-circle-fill" color="#2979ff" size="34"></u-icon>
				<text class="pay-action-sheet-item___text">支付宝</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
		<view
			class="pay-action-sheet-item u-line-1"
			:hover-stay-time="150"
			@touchmove.stop.prevent
			@click.stop="pay('wxpay')"
		>
			<view>
				<u-icon name="weixin-fill" color="#19be6b" size="34"></u-icon>
				<text class="pay-action-sheet-item___text">微信</text>
			</view>
		</view>
		<!-- #endif -->
		<view class="u-gab" v-if="cancelBtn"> </view>
		<view
			class="u-actionsheet-cancel pay-action-sheet-item"
			hover-class="u-hover-class"
			v-if="cancelBtn"
			:hover-stay-time="150"
			@tap="close"
			@touchmove.stop.prevent
		>
			{{ cancelText }}
		</view>
	</u-popup>
</template>

<script>
export default {
	name: "pay-action-sheet",
	props: {
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
		// 底部的取消按钮
		cancelBtn: {
			type: Boolean,
			default: true
		},
		// 弹出的顶部圆角值
		borderRadius: {
			type: [String, Number],
			default: 0
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		},
		// 取消按钮的文字提示
		cancelText: {
			type: String,
			default: "取消"
		},
		totalFee: {
			type: [Number, String],
			default: 0
		}
	},
	computed: {
		uZIndex() {
			// 如果用户有传递z-index值，优先使用
			return this.zIndex ? this.zIndex : this.$u.zIndex.popup
		}
	},
	data() {
		return {
			popupValue: false
		}
	},
	watch: {
		value(v1, v2) {
			this.popupValue = v1
		}
	},
	methods: {
		// 点击取消按钮
		close() {
			// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
			// 这是一个vue发送事件的特殊用法
			this.popupClose()
			this.$emit("close")
		},
		// 弹窗关闭
		popupClose() {
			this.$emit("input", false)
		},
		pay(payType) {
			//this.popupClose();
			this.$emit("click", payType)
		}
	}
}
</script>

<style lang="scss" scoped>
@import "@/uni_modules/vk-uview-ui/libs/css/style.components.scss";

.u-tips {
	font-size: 26rpx;
	text-align: center;
	padding: 34rpx 0;
	line-height: 1.5;
	color: $u-tips-color;
}

.pay-action-sheet-item {
	@include vue-flex;
	line-height: 1;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	padding: 34rpx 0;
	flex-direction: column;
}

.pay-action-sheet-item___text {
	margin-left: 10rpx;
}

.pay-action-sheet-item__subtext {
	font-size: 24rpx;
	color: $u-tips-color;
	margin-top: 20rpx;
}

.u-gab {
	height: 12rpx;
	background-color: rgb(234, 234, 236);
}

.u-actionsheet-cancel {
	color: $u-main-color;
}

.payment-amount-box {
	color: #ff623e;
	font-weight: bold;

	.payment-amount {
		font-size: 50rpx;
		margin-right: 10rpx;
	}
}
</style>
